---
title: 연결버튼
description: 연결버튼 사용 및 맞춤 설정
---

# 연결버튼

## 연결버튼 사용 및 맞춤 설정

이것은 주요 컴포넌트입니다. 연결/연결 해제 버튼을 렌더링할 뿐만 아니라 체인 스와핑 UI를 담당합니다.

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> 참고: 앱이 필요한 프로바이더로 래핑되었는지 확인하십시오. [더 읽어보기](/docs/installation#wrap-providers).

### Props

`연결버튼` 컴포넌트는 외관을 커스터마이징하기 위해 다양한 props를 제공합니다. 서로 다른 요소의 가시성을 토글하는 등의 기능을 포함합니다.

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: '지갑 연결',
      type: 'string',
      description: '연결 버튼에 표시되는 텍스트 레이블',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "활성 계정의 아바타 및/또는 주소가 표시되는지 여부",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "현재 체인의 아이콘 및/또는 이름이 표시되는지, 또는 완전히 숨겨지는지 여부",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        '잔고가 계정 이름 옆에 보이는지 여부',
    },
  ]}
/>

> 참고: 내장된 `largeScreen` 중단점은 `768px` 입니다.

### 예시들

#### 레이블

`label` prop을 사용하여 맞춤 `연결버튼` 텍스트를 설정하십시오.

```tsx
<ConnectButton label="__Sign in__" />
```

#### 계정 상태

다음은 `accountStatus` prop을 사용할 수 있는 몇 가지 방법입니다.

계정의 아바타만 표시합니다.

```tsx
<ConnectButton accountStatus="__avatar__" />
```

계정의 주소만 표시합니다.

```tsx
<ConnectButton accountStatus="__address__" />
```

#### 체인 상태

다음은 `chainStatus` prop을 사용할 수 있는 몇 가지 방법입니다.

현재 체인의 아이콘만 표시합니다.

```tsx
<ConnectButton chainStatus="__icon__" />
```

현재 체인의 이름만 표시합니다.

```tsx
<ConnectButton chainStatus="__name__" />
```

체인 UI를 완전히 숨깁니다.

```tsx
<ConnectButton chainStatus="__none__" />
```

#### 잔고 표시

`showBalance` prop을 사용하여 잔고를 숨기거나 표시합니다.

잔고를 숨깁니다.

```tsx
<ConnectButton showBalance={__false__} />
```

#### 반응형

이러한 props는 또한 반응형 포맷으로 정의될 수 있습니다.

작은 화면에서는 계정 아이콘만 표시합니다. 하지만 큰 화면에서는 아이콘과 주소를 모두 표시합니다.

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

작은 화면에서는 잔고를 숨기고, 큰 화면에서는 표시합니다.

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
